<template>
  <div class="common-layout">
    <el-container>
      <el-header class="el-container-header">
        <div class="el-container-header-img">
          <img
            src="../../assets/images/houtaiguanliImg/logotubiao.png"
            alt=""
          />
        </div>
        <p class="el-container-header-p">山海花艺后台管理系统</p>
      </el-header>
      <el-main class="el-container-main">
        <!-- form表单 -->
        <el-form>
          <el-form-item label="用户名" class="el-container-main-form-username">
            <el-input
              type="text"
              v-model="name"
              class="username"
              placeholder="请输入手机号"
            />
          </el-form-item>
          <el-form-item
            label="密码&nbsp;&nbsp;&nbsp;"
            class="el-container-main-form"
          >
            <el-input
              v-model="password"
              class="password"
              type="password"
              placeholder="请输入密码"
              show-password
            />
          </el-form-item>
          <el-form-item label="验证码" class="el-container-main-form">
            <el-input v-model="code" class="code" placeholder="请输入验证码" />
            <!-- <el-input v-model="code2" class="code2" placeholder="发送验证码" /> -->
            <el-button v-model="code2" class="code2" @click="send"
              >发送验证码</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button class="btn_sub" @click="login">登陆</el-button>
            <!-- <router-link class="el-container-main-form-login" to="/home"
              >登陆</router-link
            > -->
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import router from "../../router/index.js";
import dataProduct from "../../mock/dataProduct";

export default {
  setup() {
    const code = ref("");
    const code2 = ref("");
    onMounted(async () => {
      const res = await dataProduct.getData({
        page: 1,
        size: 10,
      });
      console.log(res);
    });

    const name = ref("");
    const password = ref("");

    // 点击登陆跳转到home页面
    const login = () => {
      fetch("http://www.pudge.wang:4000/register", {
        method: "POST",
        body: JSON.stringify({
          phone: name.value,
          code: code.value,
        }),
        headers: { "Content-Type": "application/json" },
      })
        .then((response) => response.json())
        .then((res) => {
          if (res.status === "0") {
            alert(res.msg);
            localStorage.setItem("token", res.result.token);
            router.go(-1); //路由跳转
            localStorage.setItem("name", name.value);
          } else {
            alert(res.msg);
          }
        });
    };

    const send = () => {
      fetch("http://www.pudge.wang:4000/register/getCode", {
        method: "POST",
        body: JSON.stringify({
          phone: name.value,
          templateId: "537707",
        }),
        headers: { "Content-Type": "application/json" },
      })
        .then((response) => response.json())
        .then((res) => {
          if (res.status === "0") {
            console.log("发送成功");
          } else {
            alert(res.msg);
          }
        });
    };

    // const login = () => {
    //   fetch("http://www.pudge.wang:4000/register", {
    //     method: "POST",
    //     body: JSON.stringify({
    //       phone: username.value,
    //       code: password.value,
    //     }),
    //     headers: { "Content-Type": "application/json" },
    //   })
    //     .then((response) => response.json())
    //     .then((res) => {
    //       if (res.status === "0") {
    //         alert(res.msg);
    //         localStorage.setItem("token", res.result.token);
    //         router.go(-1);
    //       } else {
    //         alert(res.msg);
    //       }
    //     });
    // };

    return {
      name,
      password,
      code,
      code2,
      login,
      send,
    };
  },
};
</script>

<style lang="less" scoped>
.common-layout {
  background: url("../../assets/images/houtaiguanliImg/bg.png");
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: fixed;
}
.el-container-header {
  width: 100%;
  height: 240px;
  margin: 0 auto;
}
.el-container-header-img {
  top: 15px;
  width: 120px;
  height: 120px;
  margin: auto;
  position: relative;
}
.el-container-header-p {
  width: 480px;
  height: 48px;
  font-size: 48px;
  font-weight: bold;
  color: #333333;
  position: absolute;
  margin-top: 28px;
  margin-left: 34%;
}
.el-container-main {
  width: 600px;
  height: 400px;
  background-color: #d2d1d1;
  opacity: 0.8;
  margin-left: 30%;
}
.el-container-main-form-username {
  margin-left: 100px;
  color: #333333;
  margin-top: 50px;
}
.el-container-main-form {
  margin-left: 100px;
  color: #333333;
}
.username {
  width: 300px;
  height: 40px;
  background-color: #fff;
}
.password {
  width: 300px;
  height: 40px;
  background-color: #fff;
}
.code {
  width: 150px;
  height: 40px;
  background-color: #fff;
}
.code2 {
  width: 100px;
  height: 40px;
  background-color: #fff;
  margin-left: 50px;
}
.btn_sub {
  margin-left: 150px;
  width: 305px;
  height: 40px;
  margin-top: 30px;
}
</style>
